<!DOCTYPE html>
<html lang="en">

<body>
   
<div class="parent">
  <span class="child">测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例</span>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
    text-align: center; /*水平居中*/

    line-height: 100px; /* 通过 line-height 设置幽灵节点的基线 */
  }
  .child {
    color: #fff;
    background-color: blueviolet;
    vertical-align: middle;
    
    line-height: normal;  /* 重点，要把 line-height 设置成 normal, 要不然会继承100 */
    display: inline-block;  /* 块级元素时需要加，使其拥有行内元素的特性 */
     
  }
</style>
</body>
</html>